<template>
    <li class="todo-item">
      <input
        type="checkbox"
        :checked="completed"
        @change="toggleCompletion"
        class="todo-checkbox"
      />
      <span :class="{ 'todo-title': true, completed: completed }">{{ title }}</span>
      <button @click="removeTodo" class="delete-btn">
        <i class="fas fa-trash-alt"></i>
      </button>
    </li>
  </template>
  
  <script>
  export default {
    name: 'TodoItem',
    props: {
      title: {
        type: String,
        required: true
      },
      completed: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      toggleCompletion() {
        this.$emit('update:completed', !this.completed);
      },
      removeTodo() {
        this.$emit('remove-todo');
      }
    }
  };
  </script>
  
  <style scoped>
  .todo-item {
    display: flex;
    align-items: center;
    padding: 1.2rem;
    margin: 0.8rem 0;
    background-color: #ffffff;
    border-radius: 0.6rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  
  .todo-item:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    transform: translateY(-0.125rem);
  }
  
  .todo-checkbox {
    margin-right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
  }
  
  .todo-title {
    flex-grow: 1;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    color: #333333;
  }
  
  .completed {
    text-decoration: line-through;
    color: #999999;
    opacity: 0.7;
  }
  
  .delete-btn {
    background: none;
    border: none;
    color: #ff4444;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.5rem;
    transition: color 0.3s ease;
  }
  
  .delete-btn:hover {
    color: #cc0000;
    transform: scale(1.1);
  }
  </style>